<template>
    <div>
        <el-row>
            <el-col :span="24">
                <span>申请人工号：</span><input type="text" name="" value="" style="width:80px"
                    v-model="product.applicant.workNumber" /> &nbsp;&nbsp;
                <span>申请单编号：</span><input type="text" name="" value="" style="width:80px"
                    v-model="product.identifier" />&nbsp;&nbsp;
                <span>工单号：</span><input type="text" name="" value="" style="width:80px"
                    v-model="product.workOrderNumber" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" @click="filter">筛选</el-button>&nbsp;&nbsp;
                <el-button type="primary" @click="back">重置</el-button>
                <el-button type="primary" @click="add">新增申请</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" style="width: 100%" :border="true">
                    <el-table-column prop="applicant.name" label="申请人" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="applicant.workNumber" label="工号" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="identifier" label="申请编号" width="200" align="center">
                    </el-table-column>
                    <el-table-column prop="workOrderNumber" label="工单号" align="center">
                    </el-table-column>
                    <el-table-column prop="materialArchive.materialNumber" label="物料档案编号" align="center">
                    </el-table-column>
                    <el-table-column prop="materialArchive.materialName" label="物料名称" align="center">
                    </el-table-column>
                    <el-table-column prop="number" label="入库数量" align="center">
                    </el-table-column>
                    <el-table-column prop="inWarehouseTime" label="入库时间" width="200" align="center">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="prev, pager, next" :page-size="9" :total="total" :pager-count="11"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
        </el-row>


    </div>
</template>

<script>
export default {
    data() {
        return {
            editFormVisible:false,
            total: 1,
            tableData: [],
            product: {
                applicant: {
                    workNumber: ""
                },
                identifier: "",
                workOrderNumber: ""
            }
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.$http.post("/inventory/product/addition", {
                product: this.product,
                currPage: val,
                pageSize: 9
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                        this.total = r.data.data.totalNums
                }
            })

        },
        filter() {
            this.$http.post("/inventory/product/addition", {
                product: this.product,
                currPage: 1,
                pageSize: 9
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                        this.total = r.data.data.totalNums
                }
            })
        },
        back() {
            this.product =  {
                applicant: {
                    workNumber: ""
                },
                identifier: "",
                workOrderNumber: ""
            }
        },
        add(){
            this.editFormVisible = true
        }
    },
    created: function () {
        this.$http.post("/inventory/product/addition", {
            product: this.product,
            currPage: 1,
            pageSize: 9
        }).then(r => {
            console.log(r)
            if (r.data.code == 200) {
                this.tableData = r.data.data.data,
                    this.total = r.data.data.totalNums,
                    console.log(this.total)
            }
        })
    }
}
</script>